<script setup lang="ts">
import { inject, ref } from "vue";
import changeTheme from "@utils/change-theme";
import { useInvokeAsync } from "@hooks/index";
import { SVGIcon, Loading, Empty } from "./components";
import StateManager from "@utils/store";
const invokeAsync = useInvokeAsync();
const store = inject<StateManager>("store");
/* Promise 请求示例 */
type NumType = {
  data: {
    num: number;
  };
  num: number;
};
const isLoading = ref<boolean>(false);
const params = ref<number>(999);
const add = async () => {
  isLoading.value = true;
  const data = await invokeAsync<NumType>("getNumType", params.value);
  params.value = data.num;
  isLoading.value = false;
};

type NameType = {
  data: {
    name: string;
  };
};
const isLoading2 = ref<boolean>(false);
const params2 = ref<{
  name: string;
}>({ name: "选个英文名" });
const add2 = async () => {
  isLoading2.value = true;
  const data = await invokeAsync<NameType>("getName", params2.value);
  params2.value = data.data;
  isLoading2.value = false;
};

/* 换肤示例 */
const changeThemeList = [
  { name: "商务蓝", color: "#276ff5" },
  { name: "典雅紫", color: "#6869FB" },
  { name: "清新绿", color: "#29C392" },
  { name: "活力橙", color: "#FC8555" },
  { name: "魅力红", color: "#E94E4F" },
];

const logStore = () => {
  console.log("store", store);
};
const testPlus = () => {
  store?.triggerAction("setCount");
};
</script>

<template>
  <div class="wrapper">
    <div>
      <h3>简单状态管理1111</h3>
      <div class="itemWrap">
        <button @click="logStore">打印store实例</button>
        <button @click="testPlus">count+1</button>
        <span>count: {{ store.state.count }}</span>
      </div>
    </div>
    <div>
      <h3>数据请求</h3>
      <h4>Promise方式异步请求数据</h4>
      <div class="itemWrap">
        <button @click="add" :disabled="isLoading">请求</button>
        <div>{{ isLoading ? "加载中" : "完成加载" }}</div>
        <span>数据：{{ JSON.stringify(params) }}</span>
      </div>
      <div class="itemWrap">
        <button @click="add2" :disabled="isLoading2">请求</button>
        <div>{{ isLoading2 ? "加载中" : "完成加载" }}</div>
        <span>数据：{{ JSON.stringify(params2.name) }}</span>
      </div>
      <h4>请求无返回</h4>
      <div class="itemWrap">
        <button
          @click="invokeAsync('noResponse', params2, { noResponse: true })"
        >
          请求
        </button>
      </div>
    </div>
    <hr />
    <h3>主题色切换</h3>
    <div class="itemWrap">
      <button
        v-for="(item, index) in changeThemeList"
        :key="index"
        @click="
          () => {
            changeTheme(item.color);
          }
        "
      >
        {{ item.name }}
      </button>
    </div>
    <div>
      <h3>图标示例：svg源文件</h3>
      <div class="itemWrap">
        <SVGIcon iconName="close" />
        <SVGIcon iconName="close" disable />
        <SVGIcon iconName="close" type="hover" :size="24" />
      </div>
    </div>
    <div>
      <h3>公共组件</h3>
      <Loading isLoading />
      <Empty />
    </div>
  </div>
</template>

<style scoped lang="less">
@import "./styles/variable.less";
.wrapper {
  background-color: @background-color;
  color: @primary-color;
}
.itemWrap {
  display: flex;
  gap: 20px;
}
</style>
